<template>
  <div class="application">
    <actionBtn></actionBtn>
    <div class="search">
        <router-link class="search_div" to="user_search">
        <div class="search_div">
          <span class="iconfont icon-sousuo"></span>
           搜索
        </div>
      </router-link>  
      <div class="function">

        <div class="down left">
          <div class="iconfont icon-yaoqinghaoyou downicon "></div>
          <div @click="to_invite_ability()">邀约能力</div>
        </div>
        <div class="right">
          <div class="down mr" @click="toDownLoad()">
            <div class="iconfont icon-xiazai downicon"></div>
            <div   >下载</div>
          </div>
          <div class="down schedule" @click="scheduleClick()">
            <div class="iconfont icon-jindu downicon "></div>
            <div>进度</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="title">
        <div class="user">已报名列表(52)</div>
        <div class="apply">
          <div class="btn_apply" @click="auidet()">审核<span class="iconfont icon-f11-copy"></span></div>
          <div class="tab" v-if="tabCut">
            <div @click="checked()">已审</div>
            <div @click="noCheck()">未审</div>
            <div @click="isDefault()">默认</div>
          </div>
        </div>
        <div class="changge">入场</div>
        <div class="entrance">签到</div>
        <div class="sign">关注</div>
        <div class="arrow">

        </div>
      </div>
      <div class="content">
        <ul>
          
          <li v-for="(list,index) in GetApplierList">
            <div class="user" @click="to_user_detail(list.Openid, list.ActivityID)">
              <div class="avatar">
                <img src="~src/images/aimer.jpg" alt="">
              </div>
              <div class="name">{{list.Openid}}</div>
            </div>
            <div class="apply tab_div">
              <span class="iconfont " v-bind:class="[list.AuditStauts ? 'icon-gougou':'circle']" @click="choose(list.ActivityID, '19851030', list.Openid, list.AuditStauts, index)" v-bind:id="list.AuditStauts"></span>
              <!-- <span class="iconfont " v-bind:class="[list.AuditStauts ? 'icon-gougou':'circle']" v-bind:id="list.AuditStauts"></span>   -->  
            </div>
            <div class="changge">
              <span class="iconfont" v-bind:class="[list.AdmissionStatus ? 'icon-gougou':'circle']"></span>
            </div>
            <div class="entrance ">
              <span class="iconfont" v-bind:class="[list.SignInStatus? 'icon-gougou':'circle']"></span>
            </div>
            <div class="sign ">
              <span class="iconfont " v-bind:class="[list.IsFocused ? 'icon-guanzhu1':'icon-guanzhu2']" v-bind:id="list.IsFocused"></span>
              <!-- <span class="iconfont " v-bind:class="[list.IsFocused ? 'icon-guanzhu1':'icon-guanzhu2']" @click="follow($event,index)" v-bind:id="list.IsFocused"></span> -->
             </div>         
              <div  @click="to_user_detail(list.Openid, list.ActivityID)" class="arrow iconfont icon-jiantou-copy"></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      付费查看更多

    </div>
    <footer>
      <div class="right">

        <div class="word" @click="toAllCheck(121)">一键全部审核</div>
      </div>
      <div class="left">

        <div class="word">群发消息</div>
      </div>
    </footer>

    <mt-popup v-model="schedule" popup-transition="popup-fate" id="schedulePopup">
      <!-- <div class="schedule">
        <div class="sum">
            共{{data.Result.ApplyCount}}人
          </div>
          <div class="particular">
              <div class="box">
                  <div>已审核：{{data.Result.AuditCount}}人</div>
                  <mt-progress :value="data.Result.AuditRatio" :bar-height="5"></mt-progress>
              </div>
              <div class="box">
                  <div>已入场：{{data.Result.AdmissionCount}}人</div>
                  <mt-progress :value="data.Result.AdmissionRatio" :bar-height="5"></mt-progress>
              </div>
              <div class="box">
                <div>已签到：{{data.Result.SignInCount}}人</div>
                  <mt-progress :value="data.Result.SignInRatio" :bar-height="5"></mt-progress>
              </div>
          </div>  

      </div> -->
    </mt-popup>
  </div>
</template>

<script>
import actionBtn from 'src/components/action_btn/action_btn'

import { GetPeopleSummary_api } from 'src/servise/getData'
import { GetApplierList_api } from 'src/servise/getData'
import { ApproveApplications_api } from 'src/servise/getData';
import { ApproveApplication_api } from 'src/servise/getData';
import { MessageBox } from 'mint-ui';
import Qs from 'Qs'
export default {
  created() {
    console.log(123123)
    this.isDefault();
    this.$http.get(GetPeopleSummary_api,{
      params: {
        "ActivityID": 121,
        "OpenId": "19851030",
        "Token":"令牌都是假的",
        "appSecret": "appSecret"
      }
    }).then((res) => {
      console.log("")
      console.log(1212);
      this.data = res.data
      // console.log(this.data);
    });
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#fff');
  },
  beforeDestroy() {
    document.querySelector('body').setAttribute('style', '')
  },

  components: {
    actionBtn,
  },



  data() {
    return {
      audit_class: {
        check: 'circle',
        attention: 'icon-guanzhu2',
      },
      OpenId: '19851030',
      data: {},
      tabCut: '',
      GetApplierList: {},
      listData: {},
      schedule:false

    }

  },

  methods: {
    to_invite_ability() {
      this.$router.push({path: '/invite_ability'});
    },
    toDownLoad() {
      //下载
       window.location.href = "http://activity.ccnf.com/api/FileDownload/DownloadApplierList?ActivityID=6";
    },
    toAllCheck(_activityid){
      //全部审核
      let That = this;
      this.$http.post(ApproveApplications_api,
      Qs.stringify({
        "ActivityID": _activityid,
        "OpenId": "19851030",
        "Token": "令牌都是假的",
        "appSecret": "appSecret"
        
      })).then((res) => {
        console.log(res);
        if(res.data["ErrorCode"] != 0){
          MessageBox.alert(res.data["ErrorMessage"]);
          return ;
        }
        // 一键审核成功
        MessageBox.alert(res.data["ErrorMessage"]);
        for (var i = 0; i < That.GetApplierList.length; i++) {
          That.GetApplierList[i].AuditStauts = 1;
        }
        // console.log(res);
      })
      //console.log(_activityid);

    },
    to_user_detail(_openid, _activityid){
      //点击跳转用户详情页面
      // console.log(_openid, _activityid);
      sessionStorage.userApply_userDetail = JSON.stringify({"ActivityID":_activityid,"openid":_openid});
      this.$router.push({ path: "/user_detail" });
    },
    isDefault(){
      //默认
      console.log(1111122);
      this.$http.get(GetApplierList_api,{
        params: {"ActivityID":121,"OrderType":0,"appSecret": "appSecret", "OpenId": "19851030", "Token": "令牌都是假的"}
      }).then((res) => {
        console.log(res.data.Result.result.data);
        console.log("##########");
        console.log(res);
        console.log("##########");
        if(res.data.ErrorCode != 0){
          MessageBox.alert(res.data["ErrorMessage"]+"默认");
          return ;
        }
        //数据保存 供循环使用
        this.GetApplierList = res.data.Result.result.data
      })
     
      console.log("默认");
    },
    noCheck(){
      //未审核
      this.$http.get(GetApplierList_api,{
        params: {"ActivityID":121, "OrderType":1, "appSecret": "appSecret", "OpenId": "19851030", "Token": "令牌都是假的"}
      }).then((res) => {
        if(res.data.ErrorCode != 0){
          MessageBox.alert(res.data["ErrorMessage"]);
          return ;
        }
        //数据保存 供循环使用
        this.GetApplierList = res.data.Result.result.data
      })
      console.log("未审核");
    },   
    checked() {
      // 审核
      this.$http.get(GetApplierList_api,{
        params: {"ActivityID":121,"OrderType":2, "appSecret": "appSecret", "OpenId": "19851030", "Token": "令牌都是假的"}
      }).then((res) => {
        if(res.data.ErrorCode != 0){
          MessageBox.alert(res.data["ErrorMessage"]);
          return ;
        }
        //数据保存 供循环使用
        this.GetApplierList = res.data.Result.result.data
      })
      console.log("已审核");
    },
    choose(_ActivityID, _Openid, _UOpenId, _AuditStauts, _index) {
      /**
       * 对用户进行审核
       * 
       * @argument
       *    _ActivityID  活动id
       *    _Openid 操作者的openid
       *    _AuditStauts 用户当前的审核状态 （0 未审核状态， 1已审核状态 ）
       *    _index 用于定位当前报名者的数据 位置
      */
      console.log(_ActivityID, _Openid, _AuditStauts, _index);
      //已审核变未审核， 未审核变已审核
      if(_AuditStauts == 1){
        _AuditStauts = 0;
      }else if(_AuditStauts == 0){
        _AuditStauts = 1;
      }
      
      let That = this;
      this.$http.post(ApproveApplication_api,
        Qs.stringify({ "ActivityID": _ActivityID, "Openid": _Openid, "UOpenId": _UOpenId, "status": _AuditStauts, "appSecret": "appSecret", "Token": "令牌都是假的" })
      ).then(function(res) {
        console.log("***************");
        console.log(res);
        console.log("***************");
        if (res.data.ErrorCode != 0) {
          return MessageBox.alert(res.data["ErrorMessage"]);
        }
        That.GetApplierList[_index].AuditStauts = That.GetApplierList[_index].AuditStauts == 1? 0 : 1;
        MessageBox.alert(res.data["ErrorMessage"]);
      })

      // console.log(index)
      // if (event.currentTarget.id == 1) {
      //   GetApplierList[index].AuditStauts = 0
      // }
    },

    follow(evnet, index) {
      console.log(22202);
      // if (event.currentTarget.id == 1) {
      //   GetApplierList[index].IsFocused = 1;
      //   console.log(GetApplierList[index].IsFocused)
      // }
    },

    auidet() {
      if (this.tabCut == true) {
        this.tabCut = false
      } else {
        this.tabCut = true
      }
    },

    scheduleClick(){
      this.schedule = true;
    }

  }


  //   beforeCreate () {
  //   document.querySelector('body').setAttribute('style', 'background:#fff')
  // },
  // beforeDestroy () {
  //   document.querySelector('body').setAttribute('style', '')
  //  }
}
</script>
<style lang="stylus" scoped>
html{-webkit-text-size-adjust:none;}
 @import './icon/iconfont.css';
  @import './icon2/iconfont.css';
   .search
      display flex
      flex-flow row
      padding 5px 15px
      //padding-bottom 44px
      padding-right 0
      border-bottom 1px solid #E5E5E5
      
     .search_div
        height 30px
        flex 1
        background-color #F0F0F0
        font-size 14px
        line-height 30px
        text-align center
        color #AEAEAE
        margin-top 1px
        span 
          color #aeaeae
     .function
        display flex
        width 130px
        padding-right: 3%;
        padding-top: 1px
        width 41%
        .down
          flex 1

          .downicon
            font-size: 14px;
          div
            font-size 12px
            text-align: center;
            color #666
            padding-top 1px
        .mr
            margin-right: 1%;

    .left
      width 45px
      margin-right: -8px;
    .right
      flex 1   
      display: flex;
     

      
   .title
      display flex
      // padding: 12px 15px;
      padding 0 15px
      height 39px
      font-size 12px
      color #666666 !important
      border-bottom 1px solid #E5E5E5
      align-items center
      justify-content center
      div
        text-align center
      .user
        flex 4
        font-size 15px
        color #333333
        text-align left 
        
      .apply
        display flex
        justify-content center
        align-items center
        height 100%
        flex 1.5
        color #666666
        position relative 
        .btn_apply {
          width 100%
          height 100%;
          display flex
          justify-content center
          align-items center
        }
        .tab
          position absolute
          flex-wrap wrap
          width 100%
          top 100%
          border-top 1px solid #e5e5e5
          div
            font-size 12px
            display block
            height 39px
            border 1px solid #dddddd
            width 100%
            display flex
            justify-content center
            align-items center
            background-color #fff
            border-top none
          
          
          z-index 99
        span 
          //position absolute
          font-size 18px
          top: -1px
          right 0

 

      .changge
        flex 1
        color #666666
      .entrance
        flex 1
        color #666666
      .sign
        flex 1
        color #666666
      .arrow
        width 0.4831rem
        padding-bottom 1px
       
    .content
       li
        display flex
        border-bottom 0.0242rem solid #E5E5E5
        height 49.9988px
        align-items:center;
        justify-content:center;
        padding: 0px 14.9992px;
     
        div
          display inline-block
          text-align center
          display flex
          align-items:center;
          justify-content:center;
          height 100%
          span
            display inline-block
            width 16.0011px
            height 16.0011px 
          .icon
            background-color #00C9C2
            border-radius 9.9981px 
         

        .arrow
          width 20.0003px 
          color: #999999;
          font-size: 0.4348rem;
          padding-top: 1.0019px;
          padding-left: 1.9996px;
        .user
          flex 4
          justify-content:right;
          color #333333
          text-align left   
          .avatar
            width 29.9984px
            height 29.9984px
            img
              width 100%
          .name   
            font-size 0.3865rem
            margin-left: 9.9981px;
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            width 69%
            justify-content flex-start

    
      .apply
        flex 1
        color #666666
      .changge
        flex 1
        color #666666
      .entrance
        flex 1
        color #666666
      .sign
        flex 1
        color #666666     
    .bottom
      height 49.9988px
      width 100%
      position fixed
      bottom 1.2rem
      font-size 0.3382rem
      color #EF5B49
      line-height 49.9988px
      text-align center
  .icon-gougou
    color #00c9c2

  .circle 
    border 1px solid #979797
    border-radius 10px
  .icon-guanzhu1
    color #F49727

   .tab_div
      position relative
      
      .tab
        position absolute
        flex-wrap wrap
        width 126%
        
        
        z-index 99
        div
          font-size 12px
          display block
          height 44px
          border 1px solid #dddddd
          width 100%
          display flex
          justify-content center
          align-items center
          background-color #fff
          border-top none
   footer
    display flex
    position fixed
    bottom 0
    width 100%
    height 50px
   
    .right
      flex 2
      background-color  #00C9C2
      display flex
    
      display flex
      justify-content center
      align-items center
      .word
        font-size 12px
        text-align center
        color: #ffffff;
    .left
      flex 3
      background-color #2A96F5
      display flex
      align-items center
      display flex
      justify-content center
      align-items center
      .word
        font-size 12px
        text-align center
        color: #ffffff;

  #schedulePopup 
    top:30%
    width: 90%;
    border-radius 5px
    padding-bottom 20px
    .sum
      font-size 15px
      height 40px
      border-bottom 1px solid #E5E5E5
      line-height 40px
      text-align center
    .particular
     
      .box 
        padding 0 18px
        padding-top: 18px
        font-size 13px
        text-align center
        .mt-progress-content
           height 17px
           border: 1px solid #ffffff;
           border-radius: 9px; 
</style>

